@use "design-system";

.privacy-settings {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;

  @include design-system.screen-sm-max {
    margin-bottom: 24px;
  }

  &__header {
    a {
      color: var(--color-primary-default);
    }
  }

  &__settings {
    display: flex;
    flex-direction: column;
    max-width: 620px;
    margin-bottom: 20px;

    a {
      color: var(--color-primary-default);

      &:hover {
        cursor: pointer;
        color: var(--color-primary-default);
      }
    }
  }

  &__setting {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: left;
    max-width: 430px;

    &__toggle {
      margin-left: 42px;
    }
  }

  &__network {
    position: relative;
  }

  .container {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease;
  }

  .hidden {
    display: none;
  }

  .categories-item {
    cursor: pointer;
  }

  .list-view,
  .detail-view {
    flex: 0 0 100%;
    width: 100%;
  }

  /* slide in show the detail view */
  .container.show-detail {
    transform: translateX(-100%);
  }

  /* slide back to show the list view */
  .container.show-list {
    transform: translateX(0%);
  }

  &__customizable-network:hover {
    cursor: pointer;
  }
}
